<template>
  <div class="login-main">
    <div class="login-box">
      <el-form  :model="form" :rules="formRules" ref="form">
      <el-form-item prop="user" label="账号">
        <el-input type="text" v-model="form.user"></el-input>
      </el-form-item>
      <el-form-item prop="pass" label="密码">
        <el-input type="password" v-model="form.pass"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
import {login} from "@/http/login"
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      console.log(rule)
      if (value === "") {
        callback(new Error("请输入密码"))
      } else {
        callback()
      }
    }
    // var validatePass2 = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请再次输入密码"))
    //   } else if (value !== this.ruleForm.pass) {
    //     callback(new Error("两次输入密码不一致!"))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      form: {
        user: "",
        pass: "",
        judeg: true
      },
      formRules: {
        user: [
          {required: true,message: "sa",trigger: "blur"}
        ],
        pass: [
          { validator: validatePass,required: true, trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    login() {
      sessionStorage.setItem("token",12345)
    },
    async submit() {
      this.$refs.form.validate(res=>{
        if (res) {
          sessionStorage.setItem("token",12345)
          let history = sessionStorage.getItem("history")
          let path = history || "/index"
          this.$router.replace({path: path})
          // let form1 = new FormData()
          // form1.append("user",this.form.user)
          // form1.append("pass",this.form.user)
          login("http://localhost:3000/login",this.form)
        } else {
          this.$message.error("失败")
        }
      })
    }
  }
}
</script>

<style lang="scss">
.login-main {

  min-height: 750px ;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid springgreen;
  .login-box {
    min-width: 300px;
    .el-form {
    .el-input { // form表单的换行输入框 其实是因为input百分百样式导致的
      width: 200px;
    }
  }
  }
}
</style>